<template>
  <div style="color: red">装箱与拆箱的理解</div>
  <br />
  <p>
    装箱:把基本数据类型转化为对应的引用数据类型 使用内置对象 如 new String()
  </p>
  <br />
  <p>拆箱：把引用数据类型转化为对应的值类型 valueOf()</p>

  <br />
  面试题:1.打印 []+[] 输出什么 答：输入出 空字符串''
  <br />
  面试题:2.打印 {}+{} 输出什么 答：输入出 [object Object][object Object]
  <div>
    <p>1.首先 通过toPrimitive 判断 []是不是原始类型 不是</p>
    <p>2.不是的话 [].valueOf()判断是不是原始类型 不是</p>
    <p>3.[].toString() 输出 空字符串'' 是原始类型</p>
    <p>4.所以输出空字符串</p>
  </div>
</template>

<script setup lang="ts" name="Packing">
// 装箱
const num = 1;
const packingNum = new Number(1);
console.log(num); //1
console.log(typeof num); //number
console.log(packingNum); // new Number()对象
console.log(typeof packingNum); // object

console.log("@@@@@@");

// 拆箱
const packingStr = new String("11");
const str = packingStr.valueOf();
console.log(packingStr); //new String('11') 对象
console.log(typeof packingStr); // object
console.log(str); //11
console.log(typeof str); //string

console.log("@@@@");

// 面试题:打印 []+[] 输出什么  答：输入出 空字符串''
// 面试题:打印 {}+{} 输出什么  答：输入出 [object Object][object Object]
console.log((([] as any) + []) as any); //''
console.log((({} as any) + {}) as any); //[object Object][object Object]
console.log([].valueOf()); //[]
console.log({}.valueOf()); //{}
console.log([].toString()); //''
console.log({}.toString()); //[object Object]
// 逻辑:
// 1.首先 通过toPrimitive 判断 []是不是原始类型 不是
// 2.不是的话 [].valueOf()  判断是不是原始类型  不是
// 3.[].toString() 输出 空字符串'' 是原始类型
// 4.所以输出空字符串

const arr = new Array(1, 2, 3);
console.log(arr);
console.log(arr.valueOf());
console.log(arr.toString());

const obj = {
  name: "sq",
  age: 25,
};
console.log(obj);
console.log(obj.valueOf());
console.log(obj.toString()); //[object Object]

const obj2 = Object.create({ name: "dd", age: 455 });
console.log(obj2.name);
console.log(obj2.valueOf());
console.log(typeof obj2.toString());
</script>

<style scoped lang="scss"></style>
